<template>
  <div class="orderDetail">
    <el-page-header @back="goBack" content="工单详情"></el-page-header>
    <div class="orderInfo">
      <!-- {{ order }} -->
      <div class="order_header">工程信息</div>
      <div class="order_content">
        <el-form label-width="150px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="工程名称:">
                {{ engineer.engineer_name }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工人姓名:">
                <el-tag
                  size="small"
                  v-if="engineer.account_name == null"
                  type="info"
                  >暂未接单</el-tag
                >
                <el-tag size="small" v-else type="success">{{
                  engineer.account_name
                }}</el-tag>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工单类型:">
                {{ engineer.type }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工单状态:">
                <template>
                  <el-tag
                    size="small"
                    v-if="engineer.status == '待接单'"
                    type="danger"
                    >{{ engineer.status }}</el-tag
                  >
                  <el-tag
                    size="small"
                    v-else-if="engineer.status == '进行中'"
                    type="warning"
                    >{{ engineer.status }}</el-tag
                  >
                  <el-tag size="mini" v-else type="success">{{
                    engineer.status
                  }}</el-tag>
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备名称:">
                {{ engineer.device_name }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="报修原因:">
                <el-tag
                  size="small"
                  v-if="engineer.bill_why == null"
                  type="info"
                  >暂无原因</el-tag
                >
                <el-tag size="small" v-else type="danger">{{
                  engineer.bill_why
                }}</el-tag>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="报修时间:">
                {{ engineer.create_time | fmtTime }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束时间:">
                <el-tag
                  size="small"
                  v-if="engineer.finish_time == null"
                  type="info"
                  >暂未结束</el-tag
                >
                <el-tag size="small" v-else type="success">{{
                  engineer.finish_time | fmtTime
                }}</el-tag></el-form-item
              >
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
// import { get, postJSON } from "@/utils/request.js";
export default {
  data() {
    return {
      engineer: [],
      order: {},
      form: {},
    };
  },
  methods: {
    //返回事件
    goBack() {
      this.$router.go(-1);
    },
  },
  created() {
    this.engineer = this.$route.query;
  },
};
</script>

<style scoped>
.orderInfo {
  padding: 1em;
}
.order_header {
  height: 42px;
  line-height: 42px;
  background: #ededed;
  color: rgb(100, 99, 99);
  font-size: 18px;
  border-radius: 3px;
  padding-left: 1em;
}
</style>